<script>
import MyBase from '@/common/formComponent/MyBase';
import MyDatetime from '@/components/my-datetime/my-datetime';

export default {
  name: 'MyScrollSelect',

  components: {
    MyBase
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    value: {
      type: String,
      default: ''
    },

    shownum: { // 1年  2月  3日  4...
      type: Number,
      default: 2
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }
  },

  render(h) {
    const DateTimeInstance = h(MyDatetime, {
      props: {
        timestr: this.value,
        shownum: this.shownum
      },
      on: {
        ok: (str, obj) => {
          this.$emit('change', str);
          this.$emit('update:value', str);
        }
      },
      ref: 'dateTimePop'
    });

    const LabelProperty = {
      on: {
        click: () => {
          if (!this.disabled) {
            this.$refs.dateTimePop.open('');
          }
        }
      },

      style: {
        display: 'block'
      }
    };

    const baseSlots = {
      header: () => {
        return (
          <div>
            { this.title }
          </div>
        );
      },

      content: () => {
        let suffix = '';
        if (this.shownum === 1) {
          suffix = '年';
        }
        return h('view', [
          (
            <view { ...LabelProperty }>
              {
                this.value
                  ? this.value + suffix
                  : (
                    <view>
                      请选择
                    </view>
                  )
              }
            </view>
          ),
          DateTimeInstance
        ]);
      }
    };

    return (
      <My-Base isShowIconArrow={ this.isShowIconArrow } icon={this.icon} scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
